<template>
    <div class='top flex'
         v-if="info.length">
        <div class="item flex">
            <img src="../../../assets/img/comment/top-icon-1.png"
                 alt=""
                 class="icon">
            <div>
                <p>{{info[0].name}}</p>
                <div class="flex">
                    <div class="score">
                        <div class="score-wrap"
                             :style="{width:percentUtil(info[0].score)}"></div>
                    </div>
                    <span>{{info[0].score}}</span>
                </div>
            </div>
        </div>
        <div class="item flex">
            <img src="../../../assets/img/comment/top-icon-2.png"
                 alt=""
                 class="icon">
            <div>
                <p>{{info[1].name}}</p>
                <div class="flex">
                    <div class="chart"
                         ref="chart"></div>
                    <span>{{info[1].score}}%</span>
                </div>
            </div>
        </div>
        <div class="item flex">
            <img src="../../../assets/img/comment/top-icon-3.png"
                 alt=""
                 class="icon">
            <div>
                <p>{{info[2].name}}</p>
                <div class="flex">
                    <div class="score">
                        <div class="score-wrap"
                             :style="{width:percentUtil(info[2].score)}"></div>
                    </div>
                    <span>{{info[2].score}}</span>
                </div>
            </div>
        </div>
        <div class="item flex">
            <img src="../../../assets/img/comment/top-icon-4.png"
                 alt=""
                 class="icon">
            <div>
                <p>{{info[3].name}}</p>
                <div class="flex">
                    <div class="score">
                        <div class="score-wrap"
                             :style="{width:percentUtil(info[3].score)}"></div>
                    </div>
                    <span>{{info[3].score}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        info: {},
    },
    components: {},
    data() {
        return {}
    },
    watch: {
        info: {
            handler(newVal) {
                this.$nextTick(() => {
                    this.chartInit(newVal[1].score * 100)
                })
            },
            deep: true,
        },
    },
    methods: {
        percentUtil(val) {
            return `${Math.ceil((Number(val) / 5) * 134)}px`
        },
        chartInit(data) {
            let _chart = this.$echarts.init(this.$refs['chart'])
            let _option = {
                grid: {
                    top: 0,
                    bottom: 0,
                    left: '0%',
                    right: '0',
                },
                xAxis: {
                    show: false,
                    type: 'value',
                    boundaryGap: [0, 0],
                },
                yAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: false,
                        },
                        axisTick: [
                            {
                                show: false,
                            },
                        ],
                        max: 5,
                    },
                ],
                series: [
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        symbolSize: [5, 27],
                        symbolMargin: 2,
                        symbolRepeat: 'repeat',
                        symbolClip: true,
                        symbolPosition: 'start',
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 37,
                                color: '#0080ff',
                            },
                        },
                        barWidth: 3,
                        data: [data],
                    },
                    {
                        name: '',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        symbolSize: [5, 27],
                        symbolMargin: 2,
                        symbolRepeat: 'repeat',
                        symbolClip: true,
                        symbolPosition: 'start',
                        zlevel: 1,
                        barWidth: 27,
                        barGap: '-650%',
                        data: [100],
                        itemStyle: {
                            normal: {
                                color: 'rgba(28, 128, 213, 0.19)',
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            }
            _chart.setOption(_option)
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang='less' scoped>
.top {
    position: absolute;
    left: 58px;
    top: 191px;
    width: 1800px;
    height: 100px;
    .item {
        width: 450px;
        height: 100px;
        padding-left: 16px;
        .icon {
            margin-right: 10px;
        }
        .chart {
            width: 175px;
            height: 16px;
        }
        .score {
            width: 134px;
            height: 20px;

            .score-wrap {
                width: 134px;
                height: 20px;
                background-image: url(../../../assets/img/comment/top-icon-5.png);
                background-size: 134px 20px;
            }
        }
        p {
            font-size: 16px;
            margin-bottom: 12px;
        }
        span {
            font-size: 24px;
            color: #00bfff;
            font-weight: bold;
            margin-left: 8px;
        }
    }
}
</style>